# Svelte 插件

import { SourceCode } from 'rspress/theme';

<SourceCode href="https://github.com/web-infra-dev/rsbuild/tree/main/packages/plugin-svelte" />

Svelte 插件提供了对 Svelte 组件（`.svelte` 文件）的支持，插件内部集成了 [svelte-loader](https://github.com/sveltejs/svelte-loader)。

## 快速开始

### 安装插件

你可以通过如下的命令安装插件:

import { PackageManagerTabs } from '@theme';

<PackageManagerTabs command="add @rsbuild/plugin-svelte -D" />

### 注册插件

你可以在 `rsbuild.config.ts` 文件中注册插件：

```ts title="rsbuild.config.ts"
import { pluginSvelte } from '@rsbuild/plugin-svelte';

export default {
  plugins: [pluginSvelte()],
};
```

注册插件后，你可以在代码中引入 `*.svelte` 单文件组件。

## 选项

如果你需要自定义 Svelte 的编译行为，可以使用以下配置项。

### svelteLoaderOptions

传递给 `svelte-loader` 的选项，请查阅 [svelte-loader 文档](https://github.com/sveltejs/svelte-loader) 来了解具体用法。

- **类型：** `SvelteLoaderOptions`
- **默认值：**

```js
const defaultOptions = {
  compilerOptions: {
    dev: isDev,
  },
  preprocess: require('svelte-preprocess')(),
  emitCss: isProd && !rsbuildConfig.output.injectStyles,
  hotReload: isDev && rsbuildConfig.dev.hmr,
};
```

- **示例：**

```ts
pluginSvelte({
  svelteLoaderOptions: {
    preprocess: null,
  },
});
```

### preprocessOptions

传递给 `svelte-preprocess` 的选项，请查阅 [svelte-preprocess 文档](https://github.com/sveltejs/svelte-preprocess/blob/c2107e529da9438ea5b8060aa471119940896e40/docs/preprocessing.md) 来了解具体用法。

- **类型：** `AutoPreprocessOptions`
- **默认值：** `undefined`

```ts
interface AutoPreprocessOptions {
  globalStyle: { ... },
  replace: { ... },
  typescript: { ... },
  scss: { ... },
  sass: { ... },
  less: { ... },
  stylus: { ... },
  babel: { ... },
  postcss: { ... },
  coffeescript: { ... },
  pug: { ... },
}
```

- **示例：**

```ts
pluginSvelte({
  preprocessOptions: {
    aliases: [
      ['potato', 'potatoLanguage'],
      ['pot', 'potatoLanguage'],
    ],
    /** Add a custom language preprocessor */
    potatoLanguage({ content, filename, attributes }) {
      const { code, map } = require('potato-language').render(content);
      return { code, map };
    },
  },
});
```
